import React, {PureComponent} from 'react';
import {Divider, Icon, message, Popconfirm, Table, Tooltip, Button, Modal} from 'antd';
import {connect} from 'dva';

const {confirm} = Modal;

@connect(state => ({
  employee: state.employee,
}))
class EmpTable extends PureComponent {
  state = {
    selectedRowKeys: [],
  };

  /**
   * 页码更改
   * */
  handPageChange = (current, pageSize) => {
    const {employee, dispatch} = this.props;
    employee.pagination = {
      page: current,
      pageSize: pageSize,
    };
    dispatch({
      type: 'employee/fetch',
    });
  }


  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    if (this.props.onSelectRow) {
      this.props.onSelectRow(selectedRows);
    }
    this.setState({selectedRowKeys});
  }

  clickDelButton = (record) => {
    const _this = this;
    const {employee, dispatch} = _this.props;
    employee.pagination = {
      page: 1
    };
    dispatch({
      type: 'employee/remove',
      payload: record,
      callback: (resultData) => {
        if (resultData.resultCode === "1") {
          message.success('删除成功');
        } else {
          message.success('删除失败');
        }
      }
    });
  }

  clickResetPwdButton = (record) => {
    const _this = this;
    const {dispatch} = _this.props;
    confirm({
      title: '确定要密码重置吗?',
      content: '重置后密码：123456',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'employee/resetPwd',
          payload: record,
          callback: (resultData) => {
            if (resultData.resultCode === "1") {
              message.success('重置成功');
            } else {
              message.success('重置失败');
            }
          }
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  /**
   * 刷新
   * */
  refresh = () => {
    const {dispatch} = this.props;
    dispatch({
      type: 'employee/fetch',
    });
  }

  render() {
    const {selectedRowKeys} = this.state;
    const {data, data: {rows}, loading, onEditEmpClick, onOpenRoleModel} = this.props;

    const pagination = {
      pageSizeOptions: ['5', '10', '15', '20'],
      total: data.total,
      defaultCurrent: 1,
      pageSize: data.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: total => <><span onClick={() => this.refresh()}
                                  style={{cursor: 'pointer', color: '#40a9ff', paddingRight: 10}}><Tooltip
        placement="top" title='刷新'><span><Icon type="reload"/></span></Tooltip></span><span> 共 {total} 条</span></>,
      onShowSizeChange: (current, pageSize) => {
        this.handPageChange(current, pageSize)
      },
      onChange: (current, pageSize) => {
        this.handPageChange(current, pageSize)
      },
    }

    const columns = [
      {
        title: '名字',
        dataIndex: 'userCName',
        align: 'center'
      },
      {
        title: '登录名',
        dataIndex: 'username',
        align: 'center'
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        align: 'center'
      },
      {
        title: '类型',
        dataIndex: 'type',
        align: 'center',
        render: (val) => {
          switch (val) {
            case 'SYSTEM':
              return <span style={{color: '#f10610'}}>系统</span>;
            case 'MASTER':
              return <span style={{color: '#f19222'}}>主帐户</span>;
            case 'SUB':
              return <span style={{color: '#4869f1'}}>子帐户</span>;
            default :
              return val;
          }
        }
      },
      {
        title: '状态',
        dataIndex: 'enabled',
        align: 'center',
        render: msg => msg === true ? <span style={{color: "green"}}>启用</span> : <span style={{color: "red"}}>禁用</span>
      },
      {
        title: '角色',
        dataIndex: 'roleName',
        align: 'center',
        render: (val, record) => val ? <Tooltip placement="top" title='修改授权'>
          <Button style={{padding: 0}} type="link" onClick={() => onOpenRoleModel(record)}><span
            style={{borderBottom: '1px solid'}}>{val}</span></Button>
        </Tooltip> : <Tooltip placement="top" title='授权'>
          <Button style={{padding: 0, color: 'red'}} type="link" onClick={() => onOpenRoleModel(record)}><span
            style={{borderBottom: '1px solid'}}>授权</span></Button>
        </Tooltip>
      },
      {
        title: '创建人',
        dataIndex: 'createName',
        align: 'center',
      },
      {
        title: '备注',
        dataIndex: 'remark',
        align: 'center',
      },
      {
        title: '操作',
        align: 'center',
        width: 140,
        render: (record) => (
          <div style={{width: 135}}>
            <Tooltip placement="top" title='修改'>
              <Button style={{padding: 0}} type="link" onClick={() => onEditEmpClick(record)}><span><Icon type="edit"/></span></Button>
            </Tooltip>
            <Divider type="vertical"/>
            <Popconfirm title="确定要删除该人员吗？" onConfirm={() => this.clickDelButton(record)}>
              <Tooltip placement="top" title='删除'>
                <Button style={{padding: 0}} type="link"><span style={{color: '#f13d74'}}><Icon
                  type="delete"/></span></Button>
              </Tooltip>
            </Popconfirm>
            <Divider type="vertical"/>
            <Tooltip placement="top" title='密码重置'>
              <Button style={{padding: 0}} type="link" onClick={() => this.clickResetPwdButton(record)}><span><Icon
                type="sync"/></span></Button>
            </Tooltip>
            {/*<Divider type="vertical"/>*/}
            {/*<Tooltip placement="top" title='授权'>*/}
            {/*<Button style={{padding: 0}} type="link" onClick={() => onOpenRoleModel(record)}><span>授权</span></Button>*/}
            {/*</Tooltip>*/}
          </div>
        ),
      },
    ];

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <Table
        size='small'
        loading={loading}
        rowKey={record => record.id}
        rowSelection={rowSelection}
        dataSource={rows}
        pagination={pagination}
        columns={columns}
      />
    );
  }
}

export default EmpTable;
